import React, { Component } from 'react';
import { connect } from 'dva';
import { produce, Draft } from 'immer';
import { Select, Button, Table, DatePicker, Input, Pagination, Icon } from 'antd';
import styles from './vitalSignsDetail.css';
import { Statistics } from '@/models/connect';
import { DEFAULT_PAGE_NUM, DEFAULT_PAGE_SIZE } from '@/const';
import { Dispatch, AnyAction } from 'redux';
import router from 'umi/router';
import { drugMedicalExportInfo } from '@/services/statistics';
import { isMenuVisible } from '@/utils/utils';
import locale from 'antd/lib/date-picker/locale/zh_CN';
import moment from 'moment';
import 'moment/locale/zh-cn';
moment.locale('zh-cn');

const { Option } = Select;
interface VitalSignsDetailPsops {
  drugMedicalDetails?: Statistics;
  commListDetail?: Statistics;
  loading: boolean;
  dispatch: Dispatch<AnyAction>;
}
interface DetailState {
  filterQueryParams: any;
  tableColumns: any;
}
class drugMedicalDetail extends Component<VitalSignsDetailPsops, DetailState> {
  // constructor(props: VitalSignsDetailPsops) {
  //     super(props);
  state: DetailState = {
    filterQueryParams: {
      deviceId: this.props.location.query.deviceId, // 资产编号
      checkObject: '', // 监测对象
      checkUserName: '', // 人员姓名
      checkSex: '', // 人员性别
      operateName: '', // 操作人员姓名
      startTime: this.props.location.query.startTime, // 开始采集时间
      endTime: this.props.location.query.endTime, // 结束采集时间
      pageNum: DEFAULT_PAGE_NUM,
      pageSize: 10,
    },
    tableColumns: localStorage.getItem('businessField'),
  };
  // }
  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 检测对象
    e.persist();
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.checkObject = e.target.value;
      }),
    );
  };
  handleInputDrugNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 检测人员姓名
    e.persist();
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.checkUserName = e.target.value;
      }),
    );
  };
  handleChangeSex = (e: string) => {
    // 检测性别
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.checkSex = e;
      }),
    );
  };
  handleInputOperaNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    // 操作人员姓名
    e.persist();
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.operateName = e.target.value;
      }),
    );
  };
  handleStartOpenChange = (date: any, dateString: any) => {
    // 开始时间
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.startTime = dateString;
      }),
    );
  };
  handleEndOpenChange = (date: any, dateString: any) => {
    // 结束时间
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.endTime = dateString;
      }),
    );
  };
  // 页码变化
  handlePageChange: (pageNum: number, pageSize: number | undefined) => void = pageNum => {
    this.setState(
      produce((draft: Draft<DetailState>): void => {
        draft.filterQueryParams.pageNum = pageNum;
      }),
      () => this.handleFilterQuery(),
    );
  };
  handleFilterQuery = () => {
    // 搜索
    // this.setState(
    //   produce((draft: Draft<DetailState>): void => {
    //     draft.filterQueryParams.pageNum = 1;
    //   }),
    // );
    const { dispatch } = this.props;
    dispatch({ type: 'statistics/drugMedicalDetail', payload: this.state.filterQueryParams });
  };
  download = () => {
    //导出
    const { dispatch } = this.props;
    dispatch({
      type: 'statistics/drugListEx',
      payload: {
        params: this.state.filterQueryParams,
        typeApi: drugMedicalExportInfo,
        name: '戒毒医疗详情.xlsx',
      },
    });
  };
  componentWillMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'statistics/drugMedicalDetail', payload: this.state.filterQueryParams });
  }
  go = () => {
    localStorage.setItem('isTrue', '17');
    router.goBack();
  };
  columns: any = JSON.parse(this.state.tableColumns);
  // [
  //     {
  //         title: '资产编号',
  //         dataIndex: 'deviceId',
  //         key: 'deviceId',
  //     },
  //     {
  //         title: '检测对象',
  //         dataIndex: 'checkObject',
  //         key: 'checkObject',
  //     },
  //     {
  //         title: '检测人员姓名',
  //         dataIndex: 'checkUserName',
  //         key: 'checkUserName',
  //     },
  //     {
  //         title: '检测人员年龄',
  //         dataIndex: 'checkAge',
  //         key: 'checkAge',
  //     },
  //     {
  //         title: '检测人员性别',
  //         dataIndex: 'checkSex',
  //         key: 'checkSex',
  //     },
  //     {
  //         title: '操作人员姓名',
  //         dataIndex: 'operateName',
  //         key: 'operateName',
  //     },
  //     {
  //         title: '操作人员部门',
  //         dataIndex: 'operateDepart',
  //         key: 'operateDepart',
  //     },
  //     {
  //       title: '采集时间',
  //       dataIndex: 'collectTime',
  //       key: 'collectTime',
  //     },
  //     {
  //       title: '检测报告',
  //       dataIndex: 'report',
  //       key: 'report',
  //     }
  // ]
  render() {
    const { drugMedicalDetails = [] } = this.props;
    console.log(drugMedicalDetails);
    return (
      <div className={`${styles.container} ${styles.detailComm}`}>
        <div className={styles.containerTitle}>位置: 戒毒医疗信息采集明细</div>
        <div
          className={styles['inforAnasy-container-top']}
          style={{ paddingLeft: '0', overflow: 'hidden' }}
        >
          <div className={styles['inforAnasy-container-top-btn']}>
            {isMenuVisible('iot:drugMedicalLog:exportBusinessInfo') && (
              <Button
                type="link"
                onClick={() => {
                  this.download();
                }}
              >
                <img src={require('@/assets/images/add.png')} alt="" />
                导出EXCEL
              </Button>
            )}
            <Button
              type="link"
              onClick={() => {
                this.go();
              }}
            >
              <Icon type="rollback" />
            </Button>
          </div>
          <div style={{ clear: 'both' }}>
            <div className={styles['inforAnasy-container-top-input dev-search']}>
              <div className={styles['dev-search-select']}>
                <Input
                  onChange={this.handleChange}
                  placeholder="请输入检测对象"
                  value={this.state.filterQueryParams.checkObject}
                  addonBefore="检测对象"
                  type="text"
                />
              </div>
              <div className={styles['dev-search-select']}>
                <Input
                  onChange={this.handleInputDrugNameChange}
                  placeholder="请输入检测人员姓名"
                  value={this.state.filterQueryParams.checkUserName}
                  addonBefore="检测人员姓名"
                  type="text"
                />
              </div>
              <div className={styles['dev-search-select']}>
                <span className={styles['dev-search-select-title']}>检测人员性别</span>
                <Select
                  defaultValue=""
                  style={{ width: 200 }}
                  value={this.state.filterQueryParams.checkSex}
                  placeholder="请选择"
                  allowClear={true}
                  onChange={this.handleChangeSex}
                >
                  <Option value="">请选择</Option>
                  <Option value="0">男</Option>
                  <Option value="1">女</Option>
                </Select>
              </div>
              <div className={styles['dev-search-select']}>
                <Input
                  onChange={this.handleInputOperaNameChange}
                  placeholder="请输入操作人员姓名"
                  value={this.state.filterQueryParams.operateName}
                  addonBefore="操作人员姓名"
                  type="text"
                />
              </div>
              <div className={styles['dev-search-select']}>
                                                
                <span className={styles['dev-search-select-title']}>采集开始时间</span>
                                                
                <DatePicker
                  value={
                    this.state.filterQueryParams.startTime === 'undefined' ||
                    this.state.filterQueryParams.startTime === ''
                      ? undefined
                      : moment(this.state.filterQueryParams.startTime)
                  }
                  onChange={this.handleStartOpenChange}
                  locale={locale}
                />
                                            
              </div>
                                          
              <div className={styles['dev-search-select']}>
                                                
                <span className={styles['dev-search-select-title']}>采集结束时间</span>
                                                
                <DatePicker
                  value={
                    this.state.filterQueryParams.endTime === 'undefined' ||
                    this.state.filterQueryParams.endTime === ''
                      ? undefined
                      : moment(this.state.filterQueryParams.endTime)
                  }
                  onChange={this.handleEndOpenChange}
                  locale={locale}
                />
                                            
              </div>
              <Button
                type="link"
                className={styles['search']}
                onClick={() => {
                  this.setState(
                    produce((draft: Draft): void => {
                      draft.filterQueryParams.pageNum = 1;
                    }),
                    () => {
                      this.handleFilterQuery();
                    },
                  );
                }}
              >
                搜索
              </Button>
              <Button
                type="link"
                className={styles['search']}
                onClick={() => {
                  this.setState(
                    produce((draft: Draft): void => {
                      draft.filterQueryParams.checkObject = '';
                      draft.filterQueryParams.checkUserName = '';
                      draft.filterQueryParams.checkSex = undefined;
                      draft.filterQueryParams.operateName = '';
                      draft.filterQueryParams.startTime = 'undefined';
                      draft.filterQueryParams.endTime = 'undefined';
                    }),
                  );
                }}
              >
                重置
              </Button>
            </div>
          </div>
        </div>
        <div className={styles.assetInfo}>
          <div className={styles.assetInfoDiv}>资产编号：{this.props.location.query.deviceId}</div>
          <div className={styles.assetInfoDiv}>
            设备名称：{this.props.location.query.deviceName}
          </div>
          <div className={styles.assetInfoDiv}>
            资产种类：{this.props.location.query.deviceTypeName}
          </div>
        </div>
        <Table
          scroll={{ y: '500px' }}
          pagination={false}
          columns={this.columns}
          dataSource={drugMedicalDetails.rows}
        />
        <div className="pagination-box">
          <Pagination
            onChange={this.handlePageChange}
            total={drugMedicalDetails.total ? drugMedicalDetails.total : 0}
            defaultCurrent={this.state.filterQueryParams.pageNum}
            current={this.state.filterQueryParams.pageNum}
          />
          <span className="pagination-title-box">
            第{this.state.filterQueryParams.pageNum}/
            {Math.ceil(
              (drugMedicalDetails.total ? drugMedicalDetails.total : 0) /
                this.state.filterQueryParams.pageSize,
            )}
            页 共{drugMedicalDetails.total ? drugMedicalDetails.total : 0}条
          </span>
        </div>
      </div>
    );
  }
}
export default connect(({ loading, statistics }: any) => ({
  loading: loading.effects['statistics/drugMedicalDetail'],
  drugMedicalDetails: statistics.drugMedicalDetails,
  commListDetail: statistics.commListDetail,
}))(drugMedicalDetail);
